<template>
  <a-form-item
    :label="item.title"
    v-bind="useFormObj.validateInfos[item.key]"
    :wrapperCol="item.wrapperCol"
  >
    <slot
      v-if="item.formSlot"
      :name="item.formSlot"
      v-bind="{
        column: item,
        text: modelRef[item.key],
        modelValue: modelRef,
      }"
    ></slot>
    <template v-else>
      <template
        v-if="editMode.includes(operateOption.type) || !operateOption.type"
      >
        <a-input
          v-if="!item.type || item.type === 'text'"
          v-model:value="modelRef[item.key]"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled(modelRef)
              : item.disabled || false
          "
          :maxlength="item.maxlength || 40"
          :placeholder="item.placeholder || `请输入${item.title}`"
          @change="
            (value) => {
              if (item.change) {
                item.change(modelRef[item.key], value, modelRef);
              }
            }
          "
        ></a-input>
        <a-select
          v-else-if="item.type === 'select'"
          v-model:value="modelRef[item.key]"
          :mode="item.mode"
          :fieldNames="item.fieldNames"
          :showArrow="true"
          :show-search="item.showSearch"
          :style="{
            width: '100%',
            ...(item.searchStyle || {}),
          }"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled()
              : item.disabled || false
          "
          :allowClear="true"
          @search="item.searchFetch"
          :filter-option="
            item.showSearch
              ? null
              : (input, option) => filterOption(input, option, item.fieldNames)
          "
          :max-tag-count="item.maxTagCount"
          :placeholder="
            item.searchPlaceholder || item.placeholder || `请输入${item.title}`
          "
          :options="item.dicData"
          @change="
            (value, option) => {
              if (item.change) {
                item.change(value, option, modelRef);
              }
            }
          "
          @dropdownVisibleChange="
            (open) => {
              if (item.dropdownVisibleChange) {
                item.dropdownVisibleChange(item, open);
              }
            }
          "
        >
          <template #option="scope">
            <span v-if="scope.id !== '加载更多'">{{
              scope[item.fieldNames?.label || "label"]
            }}</span>
            <span
              v-else
              :style="{ ...(scope.style || null) }"
              @click.stop="item.optionClick && item.optionClick(scope)"
              >{{ scope[item.fieldNames?.label || "label"] }}</span
            >
          </template>
        </a-select>
        <a-textarea
          v-else-if="item.type === 'textarea'"
          v-model:value.trim="modelRef[item.key]"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled(modelRef)
              : item.disabled || false
          "
          :show-count="item.showCount"
          :maxlength="item.maxlength || 200"
          :placeholder="item.placeholder || `请输入${item.title}`"
        />
        <a-radio-group
          v-else-if="item.type === 'radio'"
          v-model:value="modelRef[item.key]"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled(modelRef)
              : item.disabled || false
          "
          :options="item.dicData"
          @change="
            (e) => {
              item.change &&
                item.change(e.target, modelRef, setCoDicDisabledCb);
            }
          "
        />
        <a-date-picker
          v-else-if="item.type === 'picker'"
          v-model:value="modelRef[item.key]"
          :disabledDate="item.disabledDate"
          :disabledTime="item.disabledTime"
          :placeholder="item.placeholder || `请输入${item.title}`"
          :valueFormat="item.valueFormat || 'x'"
          format="YYYY-MM-DD HH:mm:ss"
          show-time
          style="width: 100%"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled()
              : item.disabled || false
          "
        />
        <a-upload
          v-else-if="item.type === 'upload'"
          v-model:file-list="fileList"
          list-type="picture"
          :max-count="1"
          :before-upload="beforeUpload"
          :customRequest="handleUpload(item)"
          @remove="handleRemove"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            选择算法镜像
          </a-button>
        </a-upload>
        <a-input-number
          v-else-if="item.type === 'number'"
          v-model:value="modelRef[item.key]"
          @change="
            (e) => {
              item.change &&
                item.change(e.target, modelRef, setCoDicDisabledCb);
            }
          "
          :min="item.min"
          :placeholder="item.placeholder"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled(modelRef)
              : item.disabled
          "
        ></a-input-number>
        <a-tree-select
          v-else-if="item.type === 'treeSelect'"
          v-model:value="modelRef[item.key]"
          :fieldNames="item.fieldNames"
          :multiple="item.multiple || false"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="item.dicData"
          :placeholder="item.placeholder || '请输入'"
          :load-data="item.onLoadData"
          :tree-checkable="item.treeCheckable || false"
          allow-clear
          :showArrow="true"
          :showSearch="item.showSearch || false"
          :show-checked-strategy="item.showCheckedStrategy"
          :disabled="
            typeof item.disabled === 'function'
              ? item.disabled(modelRef)
              : item.disabled
          "
        />
      </template>
      <template v-if="operateOption.type == 'detail'">
        <div
          v-if="item.type === 'text' || item.type === 'textarea' || !item.type"
        >
          {{
            item.customRender && modelRef[item.key]
              ? item.customRender(modelRef[item.key])
              : modelRef[item.key] || "--"
          }}
        </div>
        <div v-if="['radio', 'select'].includes(item.type)">
          {{ filterLable(item) }}
        </div>
      </template>
    </template>
  </a-form-item>
</template>
<script setup lang="ts">
import { UploadOutlined } from "@ant-design/icons-vue";
import { ref, toRefs } from "vue";

const editMode = ["form", "add", "edit"];
const props = defineProps({
  useFormObj: {
    type: Object,
    default: () => ({}),
  },
  item: {
    type: Object,
    default: () => ({}),
  },
  modelRef: {
    type: Object,
    default: () => ({}),
  },
  operateOption: {
    type: Object,
    default: () => ({}),
  },
});
const { useFormObj, item, modelRef, operateOption } = toRefs(props);
const emits = defineEmits(["setCoDicDisabled"]);
const setCoDicDisabledCb = (...args: any[]) => {
  emits("setCoDicDisabled", ...args);
};
const filterLable = (item: any) => {
  return (
    item.dicData.find((row: any) => row.value === modelRef.value[item.key])
      ?.label || "--"
  );
};
const fileList = ref([]);
const uploading = ref(false);
const beforeUpload = (file: File) => {
  fileList.value = [...(fileList.value || []), file];
  return false;
};
const handleRemove = (file: File) => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
};
const handleUpload = (item) => {
  const formData = new FormData();
  fileList.value.forEach((file) => {
    formData.append("files[]", file);
  });
  uploading.value = true;
  console.log("fileList.value", fileList.value);
  item.customRequest(formData);
};
</script>
<style lang="scss" scoped></style>
